import { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(1);

  const handleClick = () => {
    setCount(count + 1); // 2
  };

  const handleClick1 = () => {
    setCount((prevCount) => {
      return prevCount + 1;
    });
  };

  function getData() {
    console.log('数据获取了')
  }
 

  useEffect(() => {
    getData()
  }, [])


  useEffect(() => {
  
    // 1. 首次渲染完毕执行
    console.log("useEffect函数执行了"); 
    // 2. 当依赖的数据发生更新执行

    // 3. 返回的函数  更新和销毁执行

    return () => {
      console.log('这里return函数 在更新 以及 卸载的时候执行')
    }
  }, [count]);

  return (
    <div>
      函数组件
      <h1>{count}</h1>
      <button style={{ padding: 20 }} onClick={() => handleClick()}>
        +1
      </button>
      <button style={{ padding: 20 }} onClick={() => handleClick1()}>
        +1
      </button>
    </div>
  );
};

export default App;
